<template>
  <view class="container">
    <view class="list" v-if="bankList.length">
      <view class="card" v-for="item in bankList" :key="item.id">
        <view class="left">
          <view class="ico"></view>
          <view class="info">
            <view class="label">{{ item.branchName }}</view>
            <view class="value">{{ item.cardNumber }}</view>
          </view>
        </view>
        <view class="tool">
          <u-icon
            @click="more(item)"
            name="more-dot-fill"
            color="#000"
            size="18"
          />
        </view>
      </view>
    </view>
    <div class="no_data" v-else>
      <img src="/static/no-data.png" alt="" />
      <p>暂无银行卡～</p>
    </div>

    <u-popup
      @close="close"
      closeOnClickOverlay
      safeAreaInsetBottom
      :round="12"
      :show="show"
      mode="bottom"
    >
      <view class="btn">
        <view
          :class="item === '删除' && 'danger'"
          v-for="item in btnList"
          :key="item"
          @click="handleClick(item)"
          >{{ item }}</view
        >
      </view>
    </u-popup>
  </view>
</template>

<script>
import { mapState } from "vuex"
import api from "@/api"
export default {
  data() {
    return {
      show: false,
      currentItem: null,
      btnList: ["编辑", "删除", "取消"],
      bankList: [],
      // Your data here
    }
  },
  computed: {
    ...mapState({
      userId: (state) => state.user.userId,
    }),
  },
  onBackPress(e) {
    console.log(e)
    console.log("ssssss")
    // uni.switchTab({
    //   url: "pages/wallet/cashout/index",
    // })
    return true
  },
  onLoad() {},
  onShow() {
    this.getList()
  },
  //监听返回按钮事件

  methods: {
    getList() {
      api.bankcard.get(this.userId).then((res) => {
        if (res.code === 200) {
          this.bankList = res.data
        } else {
          this.bankList = []
        }
      })
    },
    more(item) {
      this.show = true
      this.currentItem = item
    },
    close() {
      this.show = false
    },
    handleDel() {
      this.close()
      uni.showModal({
        title: "温馨提示",
        content: `确认删除?删除后不可恢复`,
        showCancel: true,
        cancelText: "再想想",
        confirmText: "确认删除",
        success: (res) => {
          if (res.confirm) {
            api.bankcard.del(this.currentItem.id).then((res) => {
              if (res.code == 200) {
                this.$toast("删除成功")
                this.getList()
              }
            })
          }
        },
      })
    },
    handleClick(label) {
      switch (label) {
        case "编辑":
          const data = this.$setQ(this.currentItem)
          uni.navigateTo({
            url: `/pages/wallet/bankcard/form?data=${data}`,
          })
          this.close()
          break
        case "删除":
          this.handleDel()
          break
        case "取消":
          this.close()
          break
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  /* Your styles here */
  height: 100vh;
  background: #f7f7f7;
  .no_data {
    text-align: center;
    padding-top: 100rpx;

    img {
      width: 320rpx;
      height: 320rpx;
    }

    p {
      font-size: 24rpx;
      color: #999999;
      margin-top: -40rpx;
    }
  }
  .list {
    padding: 20rpx 0;
    .card {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 150rpx;
      background: #fff;
      margin-bottom: 20rpx;
      padding: 0 20rpx;
      .left {
        display: flex;
        align-items: center;
        .ico {
          position: relative;
          width: 50rpx;
          height: 40rpx;
          background: #07c160;
          margin-right: 30rpx;
          border-radius: 10rpx;
          &::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 1px;
            background: #fff;
            border-radius: 50%;
            top: 10rpx;
          }
        }

        .info {
          .label {
            color: #000;
            font-weight: 600;
          }

          .value {
            color: #999;
          }
        }
      }

      .tool {
        justify-content: flex-end;
        transform: rotate(90deg);
      }
    }
  }

  .btn {
    // background: #f7f7f7;
    view {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100rpx;

      &:last-child {
        border-top: 10px solid #f7f7f7;
      }
    }

    .danger {
      color: #f56c6c;
    }
  }
}
</style>
